<!-- 电子巡检 -->
<template>
  <div>
    <div class="searchBox">
      <van-search
        @search="onSearch"
        v-model="searchVal"
        placeholder="请输入搜索关键词"
      />
      <div class="line"></div>
    </div>

    <van-tabs v-model="active" @click="clickTab">
      <van-tab title="维修记录">
        <div v-if="dataList.length !== 0">
          <div
            v-for="(item, index) in dataList"
            :key="item.id"
            class="facility"
          >
            <div class="message">
              <div>{{ item.processVariables.itemName }}</div>
              <div style="font-size: 12px; margin-top: 10px">
                {{ getTime(item.endTime) }} &nbsp;&nbsp;&nbsp;test
              </div>
            </div>
            <van-button @click="look(item, index)"> 查看 </van-button>
          </div>
        </div>
        <div class="tipMsg" v-else>暂无数据</div>
      </van-tab>

      <van-tab title="维保记录">
        <!-- <div v-if="dataList.length !== 0"> -->
        <div v-for="(item, index) in dataList" :key="item.id" class="facility">
          <div class="message">
            <div>{{ item.processVariables.itemName  }}</div>
            <div style="font-size: 12px; margin-top: 10px">
              {{ getTime(item.endTime) }}&nbsp;&nbsp;&nbsp;test
            </div>
          </div>
          <van-button @click="look(item, index)"> 查看 </van-button>
        </div>
        <!-- </div>
        <div class="tipMsg" v-else>暂无数据</div> -->
      </van-tab>

      <van-tab title="巡检记录">
        <!-- <div v-if="dataList.length !== 0"> -->
        <div v-for="(item, index) in dataList" :key="item.id" class="facility">
          <div class="message">
            <div>{{ item.processVariables.itemName  }}</div>
            <div style="font-size: 12px; margin-top: 10px">
              {{ getTime(item.endTime) }}&nbsp;&nbsp;&nbsp;test
            </div>
          </div>
          <van-button @click="look(item, index)"> 查看 </van-button>
        </div>
        <!-- </div> -->
        <!-- <div class="tipMsg" v-else>暂无数据</div> -->
      </van-tab>

      <van-tab title="巡更记录">
        <!-- <div v-if="dataList.length !== 0"> -->
        <div v-for="(item, index) in dataList" :key="item.id" class="facility">
          <div class="message">
            <div>{{ item.processVariables.itemName  }}</div>
            <div style="font-size: 12px; margin-top: 10px">
              {{ getTime(item.endTime) }}&nbsp;&nbsp;&nbsp;test
            </div>
          </div>
          <van-button @click="look(item, index)"> 查看 </van-button>
        </div>
        <!-- </div> -->
        <!-- <div class="tipMsg" v-else>暂无数据</div> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Search, Divider, Button, ActionSheet, Toast } from 'vant'
import { getDefinition, getAvueForm, taskHistory } from '@/api/index'
// getRecord
import moment from 'moment'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [{ name: '保修' }, { name: '设备台账' }],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      dataList: [],
      facilityItem: {},
      facilityId: '',
      arr: ['空调维修', '电机维修', '设备维修', '普通维修', '批量维修'],
      // 假数据
      weibaoarr: [
        { name: '空调', time: '2021-09-23 12:19:43', user: '' },
        { name: '大型设备', time: '2021-09-23 12:19:43', user: '' },
        { name: '发电机', time: '2021-09-23 12:19:43', user: '' }
      ],
      xunjianarr: [
        { name: '普通巡检', time: '2021-09-23 12:19:43', user: '' },
        { name: '例行巡检', time: '2021-09-23 12:19:43', user: '' },
        { name: '突击巡检', time: '2021-09-23 12:19:43', user: '' }
      ],
      xungengarr: [
        { name: '日常巡更', time: '2021-09-23 12:19:43', user: '' },
        { name: '日常巡更', time: '2021-09-23 12:19:43', user: '' },
        { name: '日常巡更', time: '2021-09-23 12:19:43', user: '' }
      ]
    }
  },

  computed: {},
  mounted () {
    this.getList('维修')
  },

  methods: {
    clickTab (index, name) {
      console.log('点击切换标签页')
      // 切换标签页后查询对应的列表数据
      switch (this.active) {
        case 0:
          this.getList('维修')
          break
        case 1:
          this.getList('维保')
          break
        case 2:
          this.getList('检查')
          break
        case 3:
          this.getList('巡更打卡')
          break
      }
    },
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '保修':
          this.$router.push('/standingBook-guarantee')
          break
        case '设备台账':
          this.$router.push('/standingBook-detail')
          break
      }
    },
    onSearch (e) {
      console.log(e)
      if (e === '') {
        Toast('请输入内容后查询')
      } else {
        this.getList()
      }
    },
    look (item, index) {
      console.log(item)
      // const fourarr = ['repair', 'maintain', 'inspection', 'patrol']

      this.facilityItem = item
      this.facilityId = item.id
      // this.$router.push('/mokePage')
      // type,processId,id,isDetail
      // this.$router.push({
      //   path: '/mokePage',
      //   query: {
      //     pageAndList: [this.active, index],
      //     item: item
      //   }
      // })
      this.$router.push({
        path: '/form',
        query: {
          params:
            // fourarr[this.active]
            item.processDetail.CATEGORY_ +
            ',' +
            item.processInstanceId +
            ',' +
            item.taskDefinitionKey +
            ',' +
            item.id +
            ',' +
            '1' +
            ',' +
            'h5' +
            ',' + item.processDefinitionId
          // +'type,processId,id,isDetail'
        }
      })
      // this.getDefinition()
    },
    // 获取列表数据--->根据传入的参数获取对应类型的数据
    async getList (params) {
      const fourarrr = ['device_name', 'weibao_name', 'name', 'name']
      try {
        const res = await taskHistory({
          tenantId: window.localStorage.getItem('tenantId'),
          // isFinished: true,
          // key: params,
          withProcessDetail: 1,
          withVariables: 1,
          taskNameList: params,
          // 模糊查询------同时存在
          conditionKeyLike:
            this.searchVal !== '' ? fourarrr[this.active] : undefined,
          conditionValueLike:
            this.searchVal !== '' ? this.searchVal : undefined,
          page: 1,
          pageSize: 200
        })
        this.dataList = res.list
        if (this.searchVal !== '') {
          Toast('查询成功')
          this.searchVal = ''
        }
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    async getDefinition () {
      const fourarr = ['repair', 'maintain', 'patrol', 'inspection']
      const fourarrHtml = [
        'repairForm',
        'maintainForm',
        'patrolForm',
        'inspectionForm'
      ]
      const data1 = {
        definitionKey: fourarr[this.active],
        tenantId: window.localStorage.getItem('tenantId'),
        isNewest: true
      }
      const definition = await getDefinition(data1) // 定义流程
      const arr = definition.list[0]
      const data2 = {
        processId: arr.id,
        taskId: 'StartEvent',
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc',
        // 是否查询记录
        detail: true
      }
      const form = await getAvueForm(data2) // 表单
      const { detail } = form
      // 跳转到对应页面
      this.$router.push({
        path: fourarrHtml[this.active],
        query: {
          formData: this.facilityItem.processVariables,
          config: detail
        }
      })
      if (Array.isArray(form) && form.length === 0) {
        alert('字段为空')
      }
    },
    // 根据时间戳获取正确格式的事件
    getTime (params) {
      console.log(params)

      const res = moment(params).format('YYYY-MM-DD HH:mm:ss')
      console.log(res)
      return res
    }
  }
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.searchBox {
  display: fix;
  top: 0;
  left: 0;
}
.tipMsg {
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 20px;
  color: grey;
  text-align: center;
}
</style>
